<!--
 * @Description: 第二十八章（自定义Hooks） 综合案例 自定义指令+hooks
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-20 02:10:18
-->
<template>
  <div>
    <h1>第二十八章（自定义Hooks） 综合案例 自定义指令+hooks</h1>
    <div>
      <h2>使用v-resize-ia-28th</h2>
      <div id="resize" v-resize="aaa">
        <a href="https://vitejs.dev" target="_blank">
          <img src="./vite.svg" class="logo" alt="vite logo" />
        </a>
        <a href="https://vuejs.org" target="_blank">
          <img src="../../assets/logo.svg" class="logo vue" alt="vue logo" />
        </a>
      </div>
    </div>
  </div>
  <HelloWorld msg="Vite + Vue"></HelloWorld>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
// import useResize from 'v-resize-ia-28th'

// onMounted(() => {
//   useResize(document.querySelector('#resize') as HTMLElement, (e: any) => {
//     console.log('onMounted useResize e: ', e)
//   })
// })

const aaa = (e: any) => {
  console.log('useResize e: ', e)
}
</script>
<style scoped lang="less">
h1,
h2,
h3,
hr {
  margin: 10px 0;
}

#resize {
  border: 1px solid #ccc;
  resize: both;
  overflow: hidden;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
</style>
